﻿define(function (require) {
    return Backbone.View.extend({
        //... is a list tag.
        tagName: "li",
        template: _.template($("#div_group").html()),
        events: {
            "click .ui-btn-inner": "check"
        },
        initialize: function () {
            _.bindAll(this, 'render');
            this.model.view = this;

            var $self = this;
            $(this.el).attr('data-theme', 'c')
                      .addClass('ui-btn ui-btn-icon-right ui-li ui-btn-up-c');

        },
        render: function () {
            $(this.el).html(this.template(this.model.toJSON()));

            $(this.el).find('.ui-icon')
                      .data('Ischecked', false)
                      .data('Isready', false)
                      .hide();
            return this;
        },
        remove: function () {
            $(this.el).remove();
        },
        check: function () {
            var $self = this;
            var $icon = $(this.el).find('.ui-icon');

            if (!$icon.data('Isready')) return;

            var isCheck = $icon.data('Ischecked');
            $icon.data('Ischecked', !isCheck);
            if (!isCheck) {
                $icon.show();
                $self.model.choose();
            } else {
                $icon.hide();
                $self.model.unChoose();
            }

        },
        clear: function () {

        }
    });
});